<template>
  <a-form
    :model="formState"
    ref="formDataRef"
    name="basic"
    :label-col="{ style: 'width:90px' }"
    :wrapper-col="{ style: 'calc(100% - 90px)' }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-form-item label="省市区" name="cityModel" :rules="[{ required: true, message: '请选择省市区!' }]">
      <a-cascader
        v-model:value="formState.cityModel"
        showSearch
        @change="changeCityModelHandle"
        :fieldNames="{ label: 'name', value: 'code', children: 'child' }"
        :options="areaOpts"
        placeholder="请选择"
      />
    </a-form-item>
    <a-form-item label="街道" name="streetCode" :rules="[{ required: true, message: '请选择街道!' }]">
      <a-select v-model:value="formState.streetCode" showSearch placeholder="请选择街道" @change="changeStreetHandle">
        <a-select-option v-for="(item, index) in streetOpts" :key="index" :value="item.code">{{ item.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="详细地址" name="address" :rules="[{ required: true, message: '请填写详细地址!' }]">
      <a-input v-model:value="formState.address" :maxlength="50" placeholder="请选择" />
    </a-form-item>
    <a-form-item label="联系人1" name="contact1" :rules="[{ required: true, message: '请填写联系人1!' }]">
      <a-input v-model:value="formState.contact1" :maxlength="20" placeholder="请选择" />
    </a-form-item>
    <a-form-item label="联系电话1" name="phone1" :rules="[{ required: true, message: '请填写联系电话1!' }]">
      <a-input v-model:value="formState.phone1" :maxlength="20" @keyup="validateIntergeHandle($event, formState, ['phone1'])" placeholder="请输入" />
    </a-form-item>
    <a-form-item label="联系人2" name="contact2" :rules="[{ required: true, message: '请填写联系人2!' }]">
      <a-input v-model:value="formState.contact2" :maxlength="20" placeholder="请选择" />
    </a-form-item>
    <a-form-item label="联系电话2" name="phone2" :rules="[{ required: true, message: '请填写联系电话2!' }]">
      <a-input v-model:value="formState.phone2" :maxlength="20" @keyup="validateIntergeHandle($event, formState, ['phone2'])" placeholder="请输入" />
    </a-form-item>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
      <a-button :loading="loading" type="primary" html-type="submit">确定</a-button>
      <a-button @click="resetHandle">取消</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { getStreetListByAreaApi } from "@/api/common";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: ClientAddressManagement.ListRows;
    type: number;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", blo: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData, type } = toRefs(props);
const { formDataRef, formState, loading, getAreaOpts, areaOpts, streetOpts } = InitHook();
const { onFinish, onFinishFailed, resetFields, resetHandle, validateIntergeHandle, changeCityModelHandle, changeStreetHandle } = OperationHook({
  formDataRef,
  formState,
  passData,
  emit,
  type,
  loading,
  areaOpts,
  streetOpts
});
const init = () => {
  if (type.value === 2) {
    Object.assign(formState, passData.value);
    formState.cityModel = [Number(formState.stateCode), Number(formState.cityCode), Number(formState.zoneCode)];
    formState.streetCode = Number(formState.streetCode);
    getStreetListByAreaApi(Number(formState.zoneCode)).then((res: any) => {
      const { code, data } = res;
      if (code === 200) {
        streetOpts.value = data || [];
      }
    });
  }
  getAreaOpts();
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      resetFields();
      formDataRef.value.clearValidate();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
:deep(.ant-input-number){
    width: 100%;
}
</style>
